<!--我的说说-->
<style scoped>
.contain {
  height: 86%;
  overflow: auto;
}

.moments__post {
  background: #fff;
  display: block;
  border-bottom: 1px solid #f2eeee
}

.moments__post .weui-cell__hd {
  display: table-cell;
  vertical-align: top;
  min-width: 45px
}

.moments__post .weui-cell__bd {
  font-size: 15px;
  display: table-cell;
  padding-left: 10px
}

.moments__post .thumbnails {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.moments__post .thumbnails .thumbnail {
  width: 70px;
  height: 70px;
  margin: 3px;
  margin-left: 0px;
  background: #757575;
  overflow: hidden
}

.moments__post .thumbnails .thumbnail img {
  width: 100%;
  height: 100%
}

.backgound-img {
  -webkit-filter: blur(5px);
  /* Chrome, Opera */
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

._v-container {
  position: relative !important;
}

.delete {
  position: absolute;
  right: 30px;
  margin-top: -30px;
  color: #CCCCCC;
}

</style>
<template>
  <!--朋友圈组件 后期开发的核心-->
  <div class="contain">
    <div>
      <div>
        <scroller :on-refresh="refresh" :on-infinite="loadMore" height="530" ref="myscroller">
          <div v-for="item in data2" style="margin: 3px;">
            <div data-v-de3362b8 class="weui-cell moments__post">
              <div class="weui-cell__hd">
                <div>
                  <span v-if="item.date == '今天'">{{item.date}}</span>
                  <span v-else>
										<p style="display: inline;font-size: 20px;">{{item.day}}</p>
										<p style="display: inline;margin-left: -8px;font-size: 10px;">{{item.month}}月</p>
										<p style="margin-top: -15px;font-size: 20px;">{{item.year}}</p>
									</span>
                </div>
              </div>
              <div class="weui-cell__bd">
                <p id="paragraph" @click="linkMyThoughtDetail(item.id)" class="paragraph">{{item.content}}</p>
                <div>
                  <div class="thumbnails my-gallery">
                    <figure v-for="item2 in item.imageList" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="thumbnail">
                      <a :href="item2" itemprop="contentUrl" data-size="400x400">
												<img :src="item2" itemprop="thumbnail" alt="Image description" />
											</a>
                      <figcaption itemprop="caption description">Image 01</figcaption>
                    </figure>
                  </div>
                  <div class="delete" @click="deleteThought(item.id)">
                    删除
                  </div>
                </div>
              </div>
            </div>
          </div>
        </scroller>
      </div>
    </div>
    <!-- PhotoSwipe插件需要的元素， 一定要有类名 pswp -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="pswp__bg"></div>
      <div class="pswp__scroll-wrap">
        <div class="pswp__container">
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
        </div>
        <!-- 预览区域顶部的默认UI，可以修改 -->
        <div class="pswp__ui pswp__ui--hidden">
          <div class="pswp__top-bar">
            <!--  与图片相关的操作 -->
            <div class="pswp__counter"></div>
            <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
            <!--将分享按钮去掉 -->
            <!--<button class="pswp__button pswp__button--share" title="Share"></button>-->
            <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
            <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
            <div class="pswp__preloader">
              <div class="pswp__preloader__icn">
                <div class="pswp__preloader__cut">
                  <div class="pswp__preloader__donut"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
            <div class="pswp__share-tooltip"></div>
          </div>
          <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
          <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
          <div class="pswp__caption">
            <div class="pswp__caption__center"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PhotoSwipe from 'photoswipe'
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'
import 'photoswipe/dist/photoswipe.css'
import 'photoswipe/dist/default-skin/default-skin.css'
export default {
  data() {
    return {
      userId: window.localStorage["userId"],
      pageNo: 1,
      data2: [], //说说
      flowHeight: "0px"
    }
  },
  methods: {
    linkMyThoughtDetail(thoughtId) {
      this.$router.push({
        path: '/tourl/MyThoughtDetail',
        query: {
          thoughtId: thoughtId
        }
      })
    },
    deleteThought(thoughtId) {
      let _that = this;
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/mythought/delete.json",
        params: {
          userId: this.userId,
          thoughtId: thoughtId
        },
        successFc: (response) => {
          _that.refresh()
        }
      });
    },
    refresh() {
      setTimeout(() => {
        this.pageNo = 1;
        this.data = [];
        this.load();
        this.$refs.myscroller.finishPullToRefresh()
      }, 1000)
    },
    loadMore() {
      setTimeout(() => {
        this.load()
      }, 1000)
    },
    load() {
      let _that = this;
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/phome/queryThought.json",
        params: {
          userId: this.userId,
          targetUserId: this.userId,
          pageNo: this.pageNo
        },
        successFc: (response) => {
          if (response.data.data == null) {
            _that.$refs.myscroller.finishInfinite(0);
            return;
          }
          if (response.data.data) {
            response.data.data.forEach(function(o) { //分别对应：数组元素，元素的索引，数组本身
              _that.data2.push(o)
            })
          }
          _that.$refs.myscroller.finishInfinite(1);
        }
      });
      this.pageNo++;
      setTimeout(() => {
        _that.initPhotoSwipeFromDOM('.my-gallery')
      }, 1000)
    },
    initPhotoSwipeFromDOM(gallerySelector) {
      var parseThumbnailElements = function(el) {
        var thumbElements = el.childNodes,
          numNodes = thumbElements.length,
          items = [],
          figureEl,
          linkEl,
          size,
          item
        for (var i = 0; i < numNodes; i++) {
          figureEl = thumbElements[i];
          if (figureEl.nodeType !== 1) {
            continue
          }
          linkEl = figureEl.children[0];
          size = linkEl.getAttribute('data-size').split('x')
          item = {
            src: linkEl.getAttribute('href'),
            w: parseInt(size[0], 10),
            h: parseInt(size[1], 10)
          };
          if (figureEl.children.length > 1) {
            item.title = figureEl.children[1].innerHTML
          }
          if (linkEl.children.length > 0) {
            item.msrc = linkEl.children[0].getAttribute('src')
          }
          item.el = figureEl
          items.push(item)
        }
        return items
      }
      var closest = function closest(el, fn) {
        return el && (fn(el) ? el : closest(el.parentNode, fn))
      }
      var onThumbnailsClick = function(e) {
        e = e || window.event
        e.preventDefault ? e.preventDefault() : e.returnValue = false
        var eTarget = e.target || e.srcElement
        var clickedListItem = closest(eTarget, function(el) {
          return (el.tagName && el.tagName.toUpperCase() === 'FIGURE')
        });
        if (!clickedListItem) {
          return;
        }
        var clickedGallery = clickedListItem.parentNode,
          childNodes = clickedListItem.parentNode.childNodes,
          numChildNodes = childNodes.length,
          nodeIndex = 0,
          index
        for (var i = 0; i < numChildNodes; i++) {
          if (childNodes[i].nodeType !== 1) {
            continue
          }
          if (childNodes[i] === clickedListItem) {
            index = nodeIndex
            break
          }
          nodeIndex++
        }
        if (index >= 0) {
          openPhotoSwipe(index, clickedGallery)
        }
        return false;
      }
      var photoswipeParseHash = function() {
        var hash = window.location.hash.substring(1),
          params = {}
        if (hash.length < 5) {
          return params;
        }
        var vars = hash.split('&');
        for (var i = 0; i < vars.length; i++) {
          if (!vars[i]) {
            continue
          }
          var pair = vars[i].split('=');
          if (pair.length < 2) {
            continue
          }
          params[pair[0]] = pair[1];
        }
        if (params.gid) {
          params.gid = parseInt(params.gid, 10)
        }
        return params
      }
      var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
        var pswpElement = document.querySelectorAll('.pswp')[0],
          gallery,
          options,
          items
        items = parseThumbnailElements(galleryElement);
        options = {
          history: false,
          galleryUID: galleryElement.getAttribute('data-pswp-uid'),
          getThumbBoundsFn: function(index) {
            var thumbnail = items[index].el.getElementsByTagName('img')[0],
              pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
              rect = thumbnail.getBoundingClientRect()
            return {
              x: rect.left,
              y: rect.top + pageYScroll,
              w: rect.width
            }
          }
        }
        if (fromURL) {
          if (options.galleryPIDs) {
            for (var j = 0; j < items.length; j++) {
              if (items[j].pid == index) {
                options.index = j
                break
              }
            }
          } else {
            options.index = parseInt(index, 10) - 1
          }
        } else {
          options.index = parseInt(index, 10)
        }
        if (isNaN(options.index)) {
          return ''
        }
        if (disableAnimation) {
          options.showAnimationDuration = 0
        }
        gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options)
        gallery.init()
      }
      var galleryElements = document.querySelectorAll(gallerySelector)
      for (var i = 0, l = galleryElements.length; i < l; i++) {
        galleryElements[i].setAttribute('data-pswp-uid', i + 1)
        galleryElements[i].onclick = onThumbnailsClick
      }
      var hashData = photoswipeParseHash()
      if (hashData.pid && hashData.gid) {
        openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true)
      }
    }
  }
}

</script>
